<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>

<script>
    const canvas = document.createElement("canvas");
    canvas.width = 600;
    canvas.height = 400;
    document.body.append(canvas);
    const context = canvas.getContext("2d");

    // 目标：理解drawImage如何画图片
    // 1.准备一个图片源
    let img = new Image();
    img.src = './images/b.jpeg';

    // 图片加载需要一定的时间，并且这个过程不回阻塞js的执行，需要等待图片加载完成，才能绘制，onload事件就是图片加载完毕之后执行
    img.onload = function () {
        // 2.调用drawImage画图片，传入绘制的坐标，按照原有的大小绘制也就是左上角是50*50，然后往右下拉 
        // context.drawImage(img, 50, 50)

        // b.传入绘制的坐标和渲染的大小,从哪个坐标开始？，拆切的宽高是多少？
        // context.drawImage(img, 100, 100, 100, 200)

        // c.传入要拆切的区域，渲染到页面 从哪个坐标开始？拆切宽高？放到哪个坐标位置？拆切完之后显示的宽高大小？
        context.drawImage(img, 260, 380, 200, 300, 160, 150, 200, 300);
    }

</script>